<template>
	<div class="data-analysis-container">
		<!-- 顶部操作栏 -->
		<div class="operation-bar">
			<el-button type="primary" @click="handleAdd">
				<!-- <el-icon><Plus /></el-icon> -->
				新增材料
			</el-button>
			<div class="search-box">
				<el-input
					v-model="searchKeyword"
					placeholder="请输入关键词搜索"
					class="search-input"
					clearable
					@keyup.enter="handleSearch"
				>
					<template #prefix>
						<el-icon class="search-icon"><Search /></el-icon>
					</template>
				</el-input>
				<el-button type="primary" @click="handleSearch">查询</el-button>
			</div>
		</div>

		<!-- 资料列表 -->
		<el-table
			:data="tableData"
			border
			style="width: 100%; margin-top: 20px"
			height="calc(100vh - 240px)"
		>
			<el-table-column type="expand">
				<template #default="{ row }">
					<div class="expand-content">
						<div class="expand-wrapper" v-html="row.data"></div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="data" label="材料内容" min-width="400">
				<template #default="{ row }">
					<div class="content-cell">
						<el-card class="content-card">
							<div class="content-wrapper" v-html="row.data"></div>
						</el-card>
					</div>
				</template>
			</el-table-column>
			<!-- 来源 -->
			<el-table-column prop="source" label="来源" width="100" align="center" />
			<!-- 操作 -->
			<el-table-column label="操作" width="270" align="center" fixed="right">
				<template #default="{ row }">
					<div class="operation-buttons">
						<el-button size="small" type="primary" @click="handleEdit(row)">
							<!-- <el-icon><Edit /></el-icon> -->
							<span>编辑</span>
						</el-button>

						<el-button size="small" type="danger" @click="handleDelete(row)">
							<!-- <el-icon><Delete /></el-icon> -->
							<span>删除</span>
						</el-button>

						<el-button size="small" type="success" @click="handleAssociate(row)">
							<!-- <el-icon><Link /></el-icon> -->
							<span>关联题目</span>
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="pagination-container">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:total="total"
				:page-sizes="[10, 20, 50, 100]"
				layout="total, sizes, prev, pager, next"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>

		<!-- 编辑/新增抽屉 -->
		<el-drawer
			v-model="dialogVisible"
			:title="dialogType === 'add' ? '新增资料' : '编辑资料'"
			size="50%"
			:destroy-on-close="true"
		>
			<div class="drawer-content">
				<el-form :model="formData" label-width="100px">
					<el-form-item label="材料内容">
						<wang v-model="formData.data" />
					</el-form-item>
				</el-form>
			</div>

			<template #footer>
				<div class="drawer-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleSubmit">确定</el-button>
				</div>
			</template>
		</el-drawer>

		<!-- 关联抽屉 -->
		<el-drawer v-model="associateVisible" title="题目关联" size="100%" :destroy-on-close="true">
			<div class="associate-content">
				<div class="content-split">
					<!-- 左侧材料区域 -->
					<div class="left-panel">
						<div class="panel-title">材料内容</div>
						<div class="panel-content" v-html="currentMaterial.data"></div>
					</div>
					<!-- 右侧题目列表 -->
					<div class="right-panel">
						<div class="panel-title">题目列表</div>
						<div class="panel-content">
							<!-- 题目列表内容 -->
							<Papertimu @refresh="refresh" :materialId="currentMaterial.id" :shijuanId="paperId" />
						</div>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { findAll, save, del } from '../api/dataAnalysis';
// import wang from '../../../plugins/editor-wang/components/wang.vue';
import Papertimu from './Papertimu.vue';
import { Edit, Delete, Link, Search, Plus } from '@element-plus/icons-vue';

// 数据相关
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const searchKeyword = ref('');
const dialogVisible = ref(false);
const dialogType = ref('add'); // 'add' 或 'edit'
const formData = ref({
	id: '',
	data: ''
});

const props = defineProps({
	paperId: {
		type: String
	}
});
const emit = defineEmits(['crefresh']);
const refresh = () => {
	fetchData();
	emit("crefresh")
};

// 关联抽屉相关
const associateVisible = ref(false);
const currentMaterial = ref('');

// 获取列表数据
const fetchData = () => {
	try {
		// 这里替换为实际的API调用
		findAll({
			pageNum: currentPage.value,
			pageSize: pageSize.value,
			data: searchKeyword.value,
			paperId: props.paperId
		}).then(res => {
			tableData.value = res.data.records;
			total.value = res.data.total;
		});
	} catch (error) {
		ElMessage.error('获取数据失败');
	}
};
// 搜索处理
const handleSearch = () => {
	currentPage.value = 1;
	fetchData();
};

// 新增按钮点击
const handleAdd = () => {
	dialogType.value = 'add';
	formData.value = { data: '' };
	dialogVisible.value = true;
};

// 编辑按钮点击
const handleEdit = row => {
	dialogType.value = 'edit';
	formData.value = { ...row };
	dialogVisible.value = true;
};

// 删除处理
const handleDelete = row => {
	ElMessageBox.confirm('确认删除该资料？', '提示', {
		type: 'warning'
	}).then(async () => {
		try {
			// 这里替换为实际的删除API调用
			await del(row.id);
			ElMessage.success('删除成功');
			fetchData();
		} catch (error) {
			ElMessage.error('删除失败');
		}
	}).catch(() => {
	});
};

// 修改提交表单的处理函数
const handleSubmit = async () => {
	try {
		// 如果是新增，只传 data 字段
		const submitData =
			dialogType.value === 'add' ? { data: formData.value.data } : formData.value;
		if (props.paperId) {
			submitData.paperId = props.paperId;
		}
		await save(submitData);

		ElMessage.success(dialogType.value === 'add' ? '新增成功' : '编辑成功');
		dialogVisible.value = false;
		fetchData();
	} catch (error) {
		ElMessage.error(dialogType.value === 'add' ? '新增失败' : '编辑失败');
	}
};

// 分页处理
const handleSizeChange = val => {
	pageSize.value = val;
	fetchData();
};

const handleCurrentChange = val => {
	currentPage.value = val;
	fetchData();
};

// 处理关联按钮点击
const handleAssociate = row => {
	currentMaterial.value = row;
	associateVisible.value = true;
};

onMounted(() => {
	fetchData();
});
</script>

<style lang="scss" scoped>
.data-analysis-container {
	height: 100%;
	box-sizing: border-box;

	.operation-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;

		.search-box {
			display: flex;
			gap: 8px;
			align-items: center;

			.search-input {
				width: 240px;

				:deep(.el-input__wrapper) {
					box-shadow: 0 0 0 1px #dcdfe6 inset;

					&:hover {
						box-shadow: 0 0 0 1px #c0c4cc inset;
					}

					&.is-focus {
						box-shadow: 0 0 0 1px #409eff inset;
					}
				}

				.search-icon {
					color: #909399;
					font-size: 16px;
				}
			}
		}
	}

	.content-cell {
		padding: 5px 0;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 5px;
			bottom: 5px;
			width: 4px;
			background-color: #409eff;
			border-radius: 2px;
		}

		.content-card {
			margin-left: 8px;
			background-color: #fafafa;
			border: none;
			box-shadow: none;

			:deep(.el-card__body) {
				padding: 12px;
			}
		}

		.content-wrapper {
			max-height: 100px;
			overflow-y: auto;
			padding: 10px;
			font-size: 14px;
			color: #333;

			&::-webkit-scrollbar {
				width: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #ddd;
				border-radius: 3px;
			}

			&::-webkit-scrollbar-track {
				background-color: #f5f5f5;
			}

			:deep(img) {
				max-width: 100%;
				height: auto;
			}

			:deep(p) {
				margin: 0;
				line-height: 1.6;
			}
		}
	}

	.pagination-container {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
	}

	.expand-content {
		padding: 16px 32px;

		.expand-wrapper {
			padding: 20px;
			background-color: #fff;
			border: 1px solid #ebeef5;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);

			:deep(img) {
				max-width: 100%;
				height: auto;
			}

			:deep(p) {
				margin: 8px 0;
				line-height: 1.6;
				color: #333;
			}
		}
	}

	.drawer-content {
		padding: 20px;
		height: calc(100% - 100px); // 减去头部和底部的高度
		overflow-y: auto;
	}

	.drawer-footer {
		padding: 20px;
		text-align: right;

		.el-button {
			margin-left: 8px;
		}
	}

	// 美化表格样式
	:deep(.el-table) {
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

		// 表头样式
		.el-table__header-wrapper {
			th {
				background-color: #f5f7fa;
				color: #606266;
				font-weight: 600;
				height: 50px;
			}
		}

		// 表格行样式
		.el-table__row {
			td {
				padding: 12px 0;
			}

			&:hover {
				background-color: #f5f7fa !important;
			}
		}

		// 展开行图标
		.el-table__expand-icon {
			color: #409eff;

			&:hover {
				background-color: #ecf5ff;
			}
		}
	}

	// 优化操作按钮列
	:deep(.el-button--link) {
		padding: 4px 8px;
		border-radius: 4px;

		&:hover {
			background-color: #ecf5ff;
		}

		&.el-button--danger:hover {
			background-color: #fef0f0;
		}
	}

	.associate-content {
		padding: 20px;
		height: 100%;
		max-width: 100%;
		overflow: hidden;
		background-color: #f5f7fa;

		.content-split {
			display: flex;
			gap: 24px;
			height: 100%;
			min-width: 0;

			.left-panel,
			.right-panel {
				flex: 1;
				display: flex;

				flex-direction: column;
				background-color: #fff;
				border-radius: 12px;
				border: none;
				min-width: 0;
				overflow: hidden;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

				.panel-title {
					padding: 20px;
					font-size: 16px;
					font-weight: 600;
					color: #303133;
					border-bottom: 1px solid #ebeef5;
					background-color: #fafafa;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 20px;
						bottom: -1px;
						width: 40px;
						height: 2px;
						background-color: #409eff;
						border-radius: 1px;
					}
				}

				.panel-content {
					flex: 1;
					padding: 24px;
					overflow-y: auto;
					overflow-x: hidden;
					background-color: #fff;

					> * {
						max-width: 100%;
					}

					&::-webkit-scrollbar {
						width: 6px;
					}

					&::-webkit-scrollbar-thumb {
						background-color: #e0e3e9;
						border-radius: 3px;

						&:hover {
							background-color: #c0c4cc;
						}
					}

					&::-webkit-scrollbar-track {
						background-color: #f5f7fa;
					}
				}

				&.left-panel {
					.panel-content {
						background-color: #fafafa;
						font-size: 14px;
						line-height: 1.8;
						color: #606266;
					}
				}

				&.right-panel {
					.panel-content {
						background-color: #fff;
					}
				}
			}
		}
	}

	.operation-buttons {
		display: flex;
		gap: 8px;
		justify-content: center;

		.el-button {
			display: inline-flex;
			align-items: center;

			.el-icon {
				margin-right: 4px;
				font-size: 14px;
			}

			span {
				font-size: 13px;
			}

			&:hover {
				transform: translateY(-1px);
				transition: all 0.2s;
			}
		}
	}
}

:deep(.el-drawer__body) {
	height: calc(100% - 60px);
	padding: 0;
}
</style>
